<style>
.postItem {
    display: flex;
    width: 100%;
    padding: 10px 0;
    border-bottom: rgb(240, 240, 242) 1px solid;

    .cover {
        img {
            max-height: 100px;
            max-width: 170px;
        }
    }

    .text {
        display: flex;
        flex-direction: column;
        margin-left: 15px;
        color: rgb(85, 86, 101);
        width: calc(100% - 170px);

        .post_title {
            width: auto;
            font-weight: bold;
            font-size: 18px;
            color: rgb(34, 34, 38);
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .context {
            height: 40px;
            font-size: 14px;
            margin: 8px 0;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: normal;
        }

        .other {
            position: relative;
            display: flex;
            align-items: center;

            .interaction {
                display: flex;
                align-items: center;
                margin: 0 10px;
                img {
                    width: 20px;
                    height: 20px;
                }

                span {
                    font-size: 14px;
                }
            }

            .auther {
                margin-left: 10px;
                font-size: 14px;
            }
        }
    }
}
gaoliang{
    color: red;
}
</style>
<template>
    <div>
        <div class="postItem">
            <div class="cover">
                <img :src="post.cover ? post.cover : url+'static/image/logo.png'" alt="封面">
            </div>
            <div class="text">
                <div class="post_title" v-html="post.title ? post.title: '无题（唐）李商隐 '"></div>
                <div class="context" v-html="post.summary "></div>
                <div class="other">
                    <div class="interaction">
                        <img src="../assets/image/like.png" alt="未点赞">
                        <!-- <img src="../assets/image/liked.png" alt="已点赞"> -->
                        <span> {{ post.likes }} </span>
                    </div>
                    <div class="interaction">
                        <img src="../assets/image/view.png" alt="未点赞">
                        <span> {{ post.views }} </span>
                    </div>
                    <div class="interaction">
                        <img src="../assets/image/collect.png" alt="未点赞">
                        <span> {{ post.collect_count }} </span>
                    </div>
                    <!-- <div class="auther">
                        作者：{{ post.nickname }}
                    </div> -->
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { baseURL } from '@/utils/request';
export default {
    name: 'PostItem',
    props: {
        post: {
            type: Object,
            default: () => ({})
        }
    },
    data() {
        return {
            url:null,
        }
    },
    created() {
        this.url=baseURL
        this.post.content = this.post.content.replace(/<\/?[^>]+(>|$)/g, "");
    },
    watch: {
        post(newValue, oldValue) {
            this.post.content = newValue.content.replace(/<\/?[^>]+(>|$)/g, "");
        }
    },
    methods: {
    },
}
</script>